import { createAsyncThunk, createSlice } from "@reduxjs/toolkit";
import { getArtistAlbumAPI, getalbumAPI } from "../api";

export const feachAlubmDetailAction = createAsyncThunk("albumdetail", async (id: number, { dispatch }) => {
  const { songs, album } = await getalbumAPI(id)
  dispatch(changeAlbumSongAction({ songs, album }))
  const artistId = songs[0].ar[0].id
  const { hotAlbums } = await getArtistAlbumAPI(artistId)
  dispatch(changeHotAlbumsAction(hotAlbums))
})

export const feachArtistAction = createAsyncThunk("artist", async (id: number, { dispatch }) => {

})

interface IState {
  albumSongs: any[],
  album: any,
  hotAlbums: any[]
}

const initialState: IState = {
  albumSongs: [],
  album: {},
  hotAlbums: []
}

const albumSlice = createSlice({
  name: 'album',
  initialState,
  reducers: {
    changeAlbumSongAction(state, { payload }) {
      const { songs, album } = payload
      state.albumSongs = songs
      state.album = album
    },
    changeHotAlbumsAction(state, { payload }) {
      state.hotAlbums = payload
    }
  }
})

export const { changeAlbumSongAction, changeHotAlbumsAction } = albumSlice.actions
export default albumSlice.reducer